// 渲染列表的函数
listRender = () => {
    // 创建文档碎片
    let con = document.createDocumentFragment()
    data.forEach((item, index) => {
        let li = document.createElement('li')
        let input = document.createElement('input')
        input.setAttribute('type', 'checkbox')
        item.checked ? input.setAttribute('checked', true) : ''
        let span = document.createElement('span')
        span.textContent = item.title
        let a_01 = document.createElement('a')
        a_01.setAttribute('class', 'collect')
        a_01.setAttribute('href', 'javascript:;')
        a_01.textContent = item.collect ? " 取消收藏 " : " 收藏 "
        let a_02 = document.createElement('a')
        a_02.setAttribute('href', 'javascript:;')
        a_02.setAttribute('class', 'remove')
        a_02.textContent = '删除'
        li.appendChild(input)
        li.appendChild(span)
        li.appendChild(a_01)
        li.appendChild(a_02)
        con.appendChild(li)
        // 给input添加点击事件
        input.onclick = function () {
            data[index].checked = !data[index].checked
            domRender()
        }
        // 给收藏/取消收藏添加点击事件
        a_01.onclick = function () {
            data[index].collect = !data[index].collect
            domRender()
        }
        // 给删除按钮添加点击事件
        a_02.onclick = function () {
            data = data.filter((item, idx) => idx !== index)
            domRender()
        }
    })
    list.innerHTML = ''
    // 把文档碎片一次性添加到dom中 节省性能
    list.appendChild(con)
}


// 渲染DOM
domRender = () => {
    listRender()
    checkAll.checked = data.length && data.every(item => item.checked) ? true : false
}